<template>
  <!--新增会员-->
  <div class="addhuiyuan">
    <form @submit.prevent="goSubmit(viprecord)">
      <wv-group title="会员姓名">
        <wv-input placeholder="请输入会员姓名" v-model="viprecord.userName"></wv-input>
      </wv-group>
      <wv-group title="手机号">
        <wv-input placeholder="请输入手机号" type="number" :maxlength="11" v-model="viprecord.userPhone"></wv-input>
      </wv-group>
      <wv-group title="支付方式" class="way offerway" v-model="viprecord.payType=cata[0].payType">
        <wv-cell
          title="支付方式"
          is-link
          :value="cata | payWayFilter"
          @click.native="cataPickerShow = true"
        />
        <wv-picker
          :visible.sync="cataPickerShow"
          value-key="desc"
          :columns="cataColumns"
          @confirm="confirmCata"
        />
      </wv-group>
      <p class="choose" v-if="cata[0].payType=='PAY_UNDERLINE'">选择支付方式</p>
      <ul class="chooseway" v-if="cata[0].payType=='PAY_UNDERLINE'">
        <li v-for="(item,index) in radios" :key="item.index">
          <div class="radio-box">
            <label><img :src="item.paywayIcon | imgPathFilter" alt="" width="20">{{item.paywayName}}</label>
            <span class="radio" :class="{'on':item.isChecked}"></span>
            <input  :value="item.paywayId" class="input-radio" :checked='item.isChecked' @click="check(index)" type="radio" :id="item.index">
          </div>
        </li>
      </ul>

      <wv-group title="开卡类型" class="way" v-model="viprecord.goodsId=vipcard.goodsId">
        <wv-cell
          title="开卡类型"
          is-link
          :value="vipcard.goodsName"
          @click.native="vipcardPickerShow = true"
        />
        <wv-picker
          :visible.sync="vipcardPickerShow"
          value-key="goodsName"
          :columns="vipcardColumns"
          @confirm="confirmvipcard"
        />
      </wv-group>
      <wv-group title="开卡时间">
        <wv-input :value="viprecord.startDate" readonly="readonly" v-model="viprecord.startDate=startDate"></wv-input>
      </wv-group>
      <wv-group title="到期时间" v-show="false">
        <wv-input :value="viprecord.endDate" readonly="readonly" v-model="viprecord.endDate=endDate"></wv-input>
      </wv-group>
      <wv-group title="实体卡" v-model="viprecord.isGive=shiti[0].isGive">
        <wv-cell
          title="实体卡"
          is-link
          :value="shiti | shitiCataFilter"
          @click.native="shitiPickerShow = true"
        />
        <wv-picker
          :visible.sync="shitiPickerShow"
          v-model="shiti"
          value-key="desc"
          :columns="shitiColumns"
          @confirm="confirmshiti"
        />
      </wv-group>
      <wv-group title="支付金额" v-model="viprecord.amount=vipcard.goodsPrice">
        <wv-input readonly="readonly" :value="vipcard.goodsPrice+''"></wv-input>
      </wv-group>
      <p class="uploadtitle">上传支付凭证</p>
      <div class="upload" @click="initChooseImageWxapi()">
        <p><img src="../../assets/upload.png" alt="" width="36" v-if="filePath==''"> <img
          :src="filePath | imgPathFilter" width="100%" height="100%" v-model="viprecord.voucherImg=filePath" v-else></p>
      </div>
      <wv-group title="备注" class="beizhus">
        <wv-textarea placeholder="请输入备注" :rows="6" show-counter max-length="500"
                     v-model="viprecord.remark"></wv-textarea>
      </wv-group>
      <wv-group>
        <wv-input type="submit" class="offer" value="提交"></wv-input>
      </wv-group>
      <modelbg v-if="isBg"></modelbg>
    </form>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    addhuiyuan,
    updateHuiyuan,
    getOnshelfVipcard,
    getEndDate,
    uploadImg,
    employeeViprecordDetail,
    getPayWayList
  } from '../../../test/unit/http'
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import {getStore} from '../../../test/unit/storage'
  import {Toast} from 'we-vue'
  import modelbg from '../template/model_bg'

  export default {
    name: '',
    props: {},
    data() {
      return {
        cataPickerShow: false,
        cata: [{desc: '线下', payType: 'PAY_UNDERLINE'}],
        cataColumns: [
          {
            values: [
              {desc: '线下', payType: 'PAY_UNDERLINE'}
            ],
            defaultIndex: 0
          }
        ],
        paywayId:'',
        payType: 'POS刷卡',
        radios: [],
        vipcardPickerShow: false,
        vipcard: [{goodsName: ''}],
        vipcardColumns: [
          {
            values: [],
            defaultIndex: 0
          }
        ],
        shitiPickerShow: false,
        shiti: [{desc: '不要', isGive: 2}],
        shitiColumns: [
          {
            values: [
              {desc: '不要', isGive: 2},
              {desc: '要', isGive: 1}
            ],
            defaultIndex: 0
          }
        ],
        viprecord: {},
        startDate: '',
        endDate: '',
        filePath: '',
        optType: 1,
        isBg: false,
      };
    },
    methods: {
      checkFrom(viprecord) {
        let msg = {};
        if (this.$myUtils.isNull(viprecord.userName)) {
          msg['result'] = false;
          msg['info'] = '请填写姓名';
          return msg;
        }
        if (this.$myUtils.isNull(viprecord.userPhone)) {
          msg['result'] = false;
          msg['info'] = '请填写手机号';
          return msg;
        }
        if (this.$myUtils.isNull(viprecord.voucherImg)) {
          msg['result'] = false;
          msg['info'] = '请上传图片';
          return msg;
        }
        msg['result'] = true;
        msg['info'] = '校验成功';
        return msg;
      },
      confirmCata(picker) {
        this.cata = picker.getValues()
      },
      confirmvipcard(picker) {
        this.vipcard = picker.getValues()[0];
        this.vipcard.goodsId = picker.getValues()[0].goodsId;
        this.getVipcardEndDate(this.startDate, this.vipcard.goodsId);
      },
      check(index) {
        // 先取消所有选中项
        this.radios.forEach((item) => {
          item.isChecked = false;
        });
        //再设置当前点击项选中
        this.payType = this.radios[index].value;
        // 设置值，以供传递
        this.radios[index].isChecked = true;
        this.paywayId = this.radios[index].paywayId;
        console.log(this.paywayId)
      },
      getPayWay() {
        getPayWayList({}).then(res => {
          let payWayList = res.object;
          for (let key in payWayList) {
            if (key == 0) {
              payWayList[key]['isChecked'] = true;
              this.paywayId = payWayList[key].paywayId;
            } else {
              payWayList[key]['isChecked'] = false;
            }
          }
          console.log(payWayList);
          this.radios = payWayList;
          console.log(this.paywayId)
        })
      },
      viprecordDetail(params) {
        employeeViprecordDetail(params).then(res => {
          if (res.code == 100) {
            let viprecord = res.object;
            console.log(viprecord);
            this.filePath = viprecord.voucherImg;
            this.getOnshelfVipcard({goodsId: viprecord.goodsId});
            viprecord['isCheck'] = 1;
            this.viprecord = viprecord;
          }
        })
      },
      confirmshiti(picker) {
        this.shiti = picker.getValues()
      },
      goSubmit(viprecord) {
        let msg = this.checkFrom(viprecord);
        if (!msg.result) {
          Toast.text(msg.info);
          return;
        }
        console.log(viprecord);
        viprecord['paywayId']=this.paywayId;
        this.isBg = true;
        if (this.optType == 1) {
          this.addhuiyuanSub(viprecord);
        }
        if (this.optType == 2) {
          this.updateHuiyuanSub(viprecord);
        }

      },
      getVipcardEndDate(startDate, goodsId) {
        console.log(startDate);
        console.log(goodsId);
        let params = {startDate: startDate, goodsId: goodsId};
        getEndDate(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.endDate = res.object.object;
          } else {
            Toast.fail(res.info)
          }
        })
      },
      getOnshelfVipcard(params) {
        getOnshelfVipcard({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            let vipcardList = res.object.vipcardList;
            this.vipcardColumns[0].values = vipcardList;
            let vipcard = vipcardList[0];
            if (!this.$myUtils.isNull(vipcard)) {
              for (let i in vipcardList) {
                let card = vipcardList[i];
                if (card.goodsId == params.goodsId) {
                  vipcard = card;
                  break;
                }
              }
            }
            this.startDate = vipcard.startDate;
            this.endDate = vipcard.endDate;
            this.vipcard = vipcard;
          } else {
            Toast.fail(res.info)
          }
        })
      },
      addhuiyuanSub(params) {
        addhuiyuan(params).then(res => {
          if (res.code == 100) {
            let employeePosition = getStore('employeePosition');
            if (employeePosition == 'manager') {
              this.$router.push('jinglihuiyuan');
            }
            if (employeePosition == 'employee') {
              this.$router.push('yuangonghuiyuan');
            }
          } else {
            Toast.fail(res.info)
          }
        })
      },
      updateHuiyuanSub(params) {
        updateHuiyuan(params).then(res => {
          if (res.code == 100) {
            let employeePosition = getStore('employeePosition');
            if (employeePosition == 'manager') {
              this.$router.push('jinglihuiyuan');
            }
            if (employeePosition == 'employee') {
              this.$router.push('yuangonghuiyuan');
            }
          } else {
            Toast.fail(res.info)
          }
        })
      },
      initChooseImageWxapi() {
        let that = this;
        wxApi.chooseImage({
          count: 1,
          callback: function (res, localIds) {
            let imgId = res.serverId;
            let params = {
              'pojoName': 'viprecord/',
              'businessKey': '',
              'imgId': imgId
            };
            uploadImg(params).then(res => {
              if (res.code == 100) {
                that.filePath = res.object.filePath;
              } else {
                Toast.fail('上传失败');
              }
            })
          }
        });
      }
    },
    created() {
      wxApi.init();
      let type = this.$route.query.type;
      if (type == 1) {
        this.optType = 1;
        this.getOnshelfVipcard({});
      }
      if (type == 2) {
        this.optType = 2;
        let vipRecordId = this.$route.query.vipRecordId;
        this.viprecordDetail({vipRecordId: vipRecordId})
      }
      this.getPayWay();
    },
    mounted() {

    },
    filters: {
      cataFilter(val) {
        if (Array.isArray(val)) {
          return val.toString()
        } else {
          return '请选择'
        }
      },
      shitiCataFilter(val) {
        if (Array.isArray(val)) {
          return val[0].desc
        } else {
          return '请选择'
        }
      },
      payWayFilter(val) {
        if (Array.isArray(val)) {
          return val[0].desc
        } else {
          return '请选择'
        }
      }
    },
    components: {
      modelbg
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .beizhus {
    padding-bottom: 60px;
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f98e3c;
    height: 30px;
    line-height: 30px;
    color: #fff;
    z-index: 2;
  }

  .uploadtitle {
    font-size: 13px;
    color: #f98e3c;
    margin: 10px 10px 0;
    text-align: left;
  }

  .upload {
    border: 2px dashed #f98e3c;
    text-align: center;
    color: #f98e3c;
    font-size: 13px;
    padding: 30px 10px;
    margin: 15px 10px 20px;

    p {
      margin-bottom: 10px;
    }
  }

  .way .weui-cell_access {
    margin: 0 15px;
    padding: 15px 0;
    border-bottom: 1px solid transparent;
  }

  .offerway .weui-cell_access {
    border-bottom: 1px solid #e5e5e5;
  }

  .choose {
    color: #999;
    font-size: 15px;
    text-align: left;
    padding: 10px 10px 0;
  }

  .chooseway {
    li {
      border-bottom: 1px solid #eee;
      padding: 10px 0;
      margin: 10px;
    }
    :last-child {
      border-bottom: none;
    }
  }

  .radio-box {
    position: relative;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    color: #111;
    text-align: left;
    display: flex;
    label {
      flex: 1;
    }
    img {
      vertical-align: middle;
      margin-right: 10px;
    }
    .input-radio {
      display: inline-block;
      position: absolute;
      opacity: 0;
      width: 25px;
      height: 25px;
      cursor: pointer;
      right: 0;
      top: 0;
      outline: none;
      -webkit-appearance: none;
    }
  }

  .radio {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    cursor: pointer;
    background: url(../../assets/radio.png) no-repeat;
    background-size: 100% 100%;

  }
  .on {
    background-image: url(../../assets/cheaked.png);
    background-size: 100% 100%;
  }
</style>
